<template>
  <div class="page">
    <van-nav-bar title="数据质检" left-text="返回" @click-left="onClickLeft">
      <van-icon slot="left" name="arrow-left" size="20" />
    </van-nav-bar>
    <div class="content">
      <q1-strip v-bind:total="box1Data.total" />
      <q2-card v-bind:rate1="box2Data.rate1" />
      <q3-chart />
      <q4-box
        v-bind:v1="box3Data.v1"
        v-bind:v2="box3Data.v2"
        v-bind:v3="box3Data.v3"
      />
    </div>
  </div>
</template>

<script>
import Q1Strip from "@/views/quality/modules/q1-strip";
import Q2Card from "@/views/quality/modules/q2-card";
import Q3Chart from "@/views/quality/modules/q3-chart";
import Q4Box from "@/views/quality/modules/q4-box";
import API from "@/api/quality";
/**
 * 基础库建设备份
 */
export default {
  name: "qualityIndex",
  components: { Q1Strip, Q2Card, Q3Chart, Q4Box },
  data() {
    return {
      box1Data: {
        total: "0",
      },
      box2Data: {
        rate1: "0",
        rate2: 0,
        rate3: 0,
      },
      box3Data: {},
      box4Data: {
        v1: "0",
        v2: "0",
        v3: "0",
        v4: "0",
      },
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push({ path: "/" });
    },
    getquality() {
      API.getquality().then((res) => {
        if (res.status === 200) {
          var newdata = JSON.parse(res.data.resultContent);

          this.box1Data.total = newdata.CenterData.orderNums;


          this.box3Data.v1 = newdata.StandardPercentage.stdNumber[0];
          this.box3Data.v2 = newdata.StandardPercentage.stdNumber[1];
          this.box3Data.v3 = newdata.StandardPercentage.stdNumber[2];
        }
      });
    },
    getTask() {
      return () => {
        this.getquality();
      };
    },
  },
  mounted() {
    this.getTask()(); // 先执行 一次任务
    this.timer = setInterval(this.getTask(), 30000); // 设置周期触发任务
  },
  beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
  },
};
</script>

<style lang="less" scoped>
.page {
  .content {
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 10px 10px;
    .content-card {
      margin: 10px 0;
      border: 1px solid #f2f2f2;
      background-color: #ffffff;
      box-shadow: 0 4px 8px rgba(90, 163, 236, 0.14);
      border-radius: 4px;
    }
  }
}
</style>
